<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表页</title>
    <link rel="stylesheet" href="../../dist/css/details.min.css">
     <link rel="stylesheet" href="../../dist/css/jquery.exzoom.min.css">
     
   
    <style>
        #exzoom {
            width: 400px;
        }

        img {
            width: 100%;
        }
    </style>
</head>

<body>
    <!-- 头部 -->
    <header>
        
    </header>
    
    <!-- 内容区 -->
    <main>
        <!-- 手机配件 -->
        <div class="box">
            <div>
                <span>手机配件</span>
                <span>&gt;保护壳&gt;</span>
                <span>ZTE中兴&gt;</span>
                <span style="color: #999;">ZTE中兴 Axon 40 Ultra 手机保护壳</span>
            </div>
        </div>
        <div class="center">
         <div class="left">
        <!-- 图片区 -->
        <div class="exzoom" id="exzoom">
            <!--大图区域-->
            <div class="exzoom_img_box">
                <ul class='exzoom_img_ul'>
                    <li><img src="../img/min.jpg" /></li>
                    <li><img src="../img/f1.png" /></li>
                    <li><img src="../img/f2.jpg" /></li>
                   
                </ul>
            </div>
            <!--缩略图导航-->
            <div class="exzoom_nav"></div>
            <!--控制按钮-->
            <p class="exzoom_btn">
                <a href="javascript:void(0);" class="exzoom_prev_btn"> &lt; </a>
                <a href="javascript:void(0);" class="exzoom_next_btn"> &gt; </a>
            </p>
        </div>

             </div>
             <!-- 右边 信息 -->
             <div class="right" data-good-id="sj1">
                 <div class="name" >ZTE中兴 Axon 40 Ultra 手机保护壳</div>
                 <div class="price">
                     <div class="price-a">￥ <span style="display: inline;">99.00</span></div>
                     <!-- 手机购买 -->
                     <div class="mob"></div>
                         <div class="sj"></div>
                         <div class="rwm">
                             <!-- <img src="../img/xiazai.png" alt=""> -->
                         </div>
                     </div>
                     <div class="color">
                         <div class="a1">
                             <div class="a1-c">颜色</div>
                             <div class="a1-img">
                                 <div><img src="../img/min.jpg" alt=""></div>
                             </div>
                         </div>
                         <!-- 已选商品 -->
                         <div class="a2">
                             <span>已选商品</span> 
                             <span id="num" style="color: red;">1件</span>
                         </div>
                         <!-- 数量 -->
                         <div class="a3">
                             <div>数&nbsp;&nbsp;量</div>
                             <span id="minus" style="border-right: none;">-</span>
                             <input type="text" value="1">
                             <span id="plus" style="border-left:none;">+</span>
                         </div>
                         <!-- 购买 -->
                         <div class="a4">
                             <div class="span1" id="span">
                             <span><a href="javascript:;">立即购买</a></span>
                            </div>
                             <div class="span2" >
                                <span id="aa1">加入购物车</span>
                             </div>
                             <div class="join-cart">
                                 <div class="q1">加入购物车
                                     <span>×</span>
                                 </div>
                                 <div class="q2">商品成功加入购物车！</div>
                                 <div class="q3">
                                     <span class="s1">继续购物</span>
                                     <span class="s2">进入购物车</span>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
                <!-- 产品介绍-->
                    <div class="tab">
                        <ul class="ul">
                            <li>产品介绍</li>
                            <li>规格参数</li>
                            <li>商品咨询</li>
                            <li>用户评论</li>
                        </ul>
                        
                        <!-- 产品内容 -->
                        <ul class="content">
                          <li id="content1">
                        
                            <div class="detailed"  id="detailed">
                                <div class="code">
                                    
                                <div class="p1">商品编号：G627B7ECBE76EE</div>
                                <div class="p2">商品毛重：0.200kg</div>
                                </div>
                                <div class="product">产品信息</div>
                                <div class="max-img">
                                    <div class="max-min1">
                                        <div><img src="../img/max-1.jpg" alt="">
                                        </div>
                                    <div><img src="../img/max-2.jpg" alt=""></div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li id="content2">
                            <!-- 规格参数 -->
                            <div class="detailed" id="parameter">
                                <table>
                                    <tr>
                                        <td colspan="2" style="text-align: center; background-color: #f5fcfe;font-weight: bold;" >主体</td>
                                        <!-- <td></td> -->
                                    </tr>
                                    <tr>
                                        <td class="td">品牌</td>
                                        <td>ZTE中兴</td>
                                    </tr>
                                    <tr>
                                        <td class="td">名称</td>
                                        <td>ZTE中兴 Axon 40 Ultra 手机保护壳</td>
                                    </tr>
                                    <tr>
                                        <td class="td">颜色</td>
                                        <td>黑</td>
                                    </tr>
                                </table>
                            </div>
                        </li>
                        <li id="content3">
                            <!-- 商品咨询 -->
                            <div class="detailed " id="consult" >
                                <ul>
                                    <li><a href="">全部咨询(0条)</a></li>
                                    <li><a href="">商品咨询(0条)</a></li>
                                    <li><a href="">库存配送(0条)</a></li>
                                    <li><a href="">支付方式(0条)</a></li>
                                    <li><a href="">发票保修(0条)</a></li>
                                    <li><a href="">发票保修(0条)</a></li>
                                    <!-- 发表咨询 -->
                                    <div class="publish">
                                        <p class="p3">发表咨询</p>
                                        <p class="p4">声明：您可以在购买前对产品包装、颜色、运输、库存等方面进行咨询，我们有专人进行回复！因厂家随时会更新一些产品的包装、颜色、产地等参数，所以该回复仅在当时对提问者有效，其他网友仅供参考！咨询回复的工作时间为：周一至周五，9:00至18:00，请耐心等待工作人员回复。</p>
                                    </div>
                                </ul>
                                
                            </div>
                        </li>
                    </ul>
               </div> 
                    
                 
             </div>
           </div>
        </div>
    </main>
     <footer>
       
     </footer>
     <script src="../lib/jquery-1.12.4.min.js"></script>
     <script src="../lib/jquery.cookie.js"></script>
     <script src="../lib/cookie.js"></script>
     <script src="../lib/jquery.exzoom.js"></script>
     <script src="../js/details.js"></script>    
       
     <script>
        $('header').load('./public.html header');
        $('footer').load('./public.html footer');
        
        $('#aa1').click(function(){
            $('.join-cart').css('display','block')
        })
        $('.join-cart .q1 span').click(function(){
            $('.join-cart').css('display','none')
        })
        $('.join-cart .q3 .s1').click(function(){
            $('.join-cart').css('display','none')
        })
        $('.join-cart .q3 .s2').click(()=>{
            console.log(1)
            location.href = ('./cart.html')
        })
        
    </script>     
    <script type="text/javascript">
            $("#exzoom").exzoom({
                autoPlay: false,
            })//方法调用，务必在加载完后执行
            </script>
            <script>
let li = document.querySelectorAll('.tab .ul li');
let  o_li = document.querySelectorAll('.content li')
      
 for( let i = 0,len = li.length; i < len ; i++){
     li[i].onclick = function(){
         for( let j = 0,len = li.length; j < len; j++){
             li[j].style.borderTop = 'none';
             li[j].style.color = ' black';
            o_li[j].style.display = 'none'
            // o_li[0].style.display = 'block';
         }
          li[i].style.borderTop = '1px solid red';
         li[i].style.color = ' red';
         o_li[i].style.display = 'block';  
     }
 }
 $('.a1-img').hover(function(){
     $(this).css({
         border : '1px solid red'
     })
 },function(){
     $(this).css({
         border : '1px solid black'
     })
 }) 
                         
    </script>
    <script>
        $('.a4 .span2').mouseenter(function(){
            console.log(1)
        })
    </script>
</body>

</html>